<template>
  <div class="Doctorcard" v-if="zv" >
    <div class="zdoctor">
      <div class="zphoto">
        <img :src="`${zv.head}`" alt="" />
      </div>
      <div class="zfont">
        <div class="zname">
          <b>{{ zv.dname }}</b>
          <span>{{ zv.lv }}</span>
          <div>多点执业</div>
        </div>
        <div class="zservice">
          <img src="@/assets/images/Hospital/star.png" />
          <b>{{ zv.pingfen }}</b>
          <p>预约量</p>
          <span>{{ zv.yuyue }}</span>
        </div>
        <div
          style="font-size: 0.75rem"
          v-if="hosid && hosid.data && hosid.data[zv.hospital]"
        >
          <b>{{ this.hosid.data[zv.hospital].hname }}</b>
        </div>
      </div>
    </div>
    <div class="zskilled">
      <p>擅长:{{ zv.strong }}</p>
    </div>
    <div class="week" v-if="zv.tag" v-html="zv.tag"></div>
    <div class="zcost">
      <p>
        专享挂号费<span>￥{{ zv.price }}</span>
        <span>￥{{ zv.price_old }}</span>
      </p>
      <div>去挂号</div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.axios(`/users/hospital`).then((res) => {
      this.hosid = res.data;
    });
  },
  data() {
    return {
      hosid: null,
    };
  },
  props: {
    zv: {
      type: Object,
    },
  },
};
</script>

<style scoped lang="scss">
.Doctorcard {
  border-radius: 0.5rem;
  padding: 2vw 0 3vw 2vw;
  background-color: rgba(235, 234, 234, 0.322);
  margin-bottom: 4vw;
}
.zdoctor {
  display: flex;
  width: 100%;
  > .zphoto {
    height: 25vw;
    width: 25vw;
    border-radius: 50%;
    overflow: hidden;
    > img {
      width: 100%;
    }
  }
  > .zfont {
    width: 75%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    > div {
      display: flex;
      padding: 1vw 0 1vw;
      width: 100%;
      &.zname {
        overflow: hidden;
        align-items: center;
        justify-content: flex-end;
        > b {
          font-size: 1.25rem;
          width: 30%;
        }
        > span {
          width: 40%;
          font-size: 1rem;
          font-weight: 600;
        }
        > div {
          padding: 1vw 2vw;
          border-radius: 3vw 0 0 3vw;
          background-color: rgb(255, 171, 87);
          color: white;
          right: -2vw;
        }
      }
      &.zservice {
        padding: 2vw;
        width: 80%;
        display: flex;
        align-items: center;
        > img {
          width: 6%;
          margin-right: 1vw;
        }
        > b {
          font-size: 1.25rem;
        }
        > p {
          margin: 0 2vw;
          color: #000;
        }
        color: #fe787b;
      }
    }
  }
}
.zskilled {
  margin: 2vh 0;
  height: fit-content;
  > p {
    color: rgb(80, 80, 80);
    line-height: 2.5vh;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    padding-right: 2vh;
  }
}
.zcost {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-right: 3vw;
  > div {
    width: 15vw;
    text-align: center;
    background-color: rgb(123, 246, 185);
    padding: 1vw 3vw;
    border-radius: 2vh;
    color: #fff;
  }
  > p {
    > span:first-child {
      margin: 0 3vw;
      font-weight: 600;
      font-size: 1.5rem;
      color: #fe787b;
    }
    > span:last-child {
      text-decoration: line-through;
      font-size: 0.75rem;
      color: #666;
    }
  }
}
::v-deep .week {
  margin-bottom: 1vw;

  > span {
    padding: 1vw 3vw;
    margin-right: 3vw;
    background-color: rgb(205, 243, 255);
    color: rgb(0, 184, 234);
    border-radius: 1vw;
  }
}
</style>